<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动监听</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>

<body>
    <div class="container"><div class="row">
        <div class="col-4">
            <nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
                <a class="navbar-brand" href="#">Navbar</a>
                <nav class="nav nav-pills flex-column">
                    <a class="nav-link" href="#item-1">Item 1</a>
                    <nav class="nav nav-pills flex-column">
                        <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
                        <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
                    </nav>
                    <a class="nav-link" href="#item-2">Item 2</a>
                    <a class="nav-link active" href="#item-3">Item 3</a>
                    <nav class="nav nav-pills flex-column">
                        <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
                        <a class="nav-link ms-3 my-1 active" href="#item-3-2">Item 3-2</a>
                    </nav>
                </nav>
            </nav>
        </div>
        <div class="col-8">
            <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" class="scrollspy-example-2" tabindex="0">
                <h4 id="item-1">Item 1</h4>
                <p>...</p>
                <h5 id="item-1-1">Item 1-1</h5>
                <p>...</p>
                <h5 id="item-1-2">Item 1-2</h5>
                <p>...</p>
                <h4 id="item-2">Item 2</h4>
                <p>...</p>
                <h4 id="item-3">Item 3</h4>
                <p>...</p>
                <h5 id="item-3-1">Item 3-1</h5>
                <p>...</p>
                <h5 id="item-3-2">Item 3-2</h5>
                <p>...</p>
            </div>
        </div>
    </div></div>
    <br>
    <div class="container"><div id="list-example" class="list-group">
        <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
        <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
        <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
        <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
      </div>
      <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
        <h4 id="list-item-1">Item 1</h4>
        <p>...</p>
        <h4 id="list-item-2">Item 2</h4>
        <p>...</p>
        <h4 id="list-item-3">Item 3</h4>
        <p>...</p>
        <h4 id="list-item-4">Item 4</h4>
        <p>...</p>
      </div></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>
    <br>
    <div class="container"></div>

    <script src="./js/bootstrap.bundle.min.js"></script>
</body>

</html>